<template>
  <ContentWrap>
    <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
      <el-form-item label="来访者姓名" prop="visitName">
        <el-input
          v-model="queryParams.visitName"
          placeholder="请输入来访者姓名"
          :clearable="true"
          @keyup.enter="getPage"
        />
      </el-form-item>
      <el-form-item label="来访者手机" prop="visitMobile">
        <el-input
          v-model="queryParams.visitMobile"
          placeholder="请输入来访者手机"
          :clearable="true"
          @keyup.enter="getPage"
        />
      </el-form-item>
      <el-form-item label="是否预约" prop="isReserve">
        <el-select v-model="queryParams.isReserve" placeholder="请选择是否预约" :clearable="true">
          <el-option
            v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" :clearable="true">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.ELDER_VISIT_STATUS)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['elder:visit:query']" @click="handleClickSearch">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
        <el-button v-hasPermi="['elder:visit:create']" @click="handleClickCreate">
          <Icon icon="ep:plus" />
          新增
        </el-button>
      </el-form-item>
    </el-form>
    <Table
      :columns="columns"
      :page-param="queryParams"
      :adaptive="true"
      :page-data="queryData"
      save-key="ElderVisit"
      height-per="90"
      @page-change="getPage"
      @row-dblclick="handleTableDblclick"
    >
      <template #menu="{ row }">
        <context-menu-item
          label="修改"
          @click="handleMenuUpdate(row)"
          v-hasPermi="['elder:visit:update']"
        />
        <context-menu-item
          label="取消预约"
          @click="handleMenuCancel(row)"
          v-hasPermi="['elder:visit:cancel']"
        />
        <context-menu-item
          label="确认来访"
          @click="handleMenuConfirmVisit(row)"
          v-hasPermi="['elder:visit:confirmVisit']"
        />
        <context-menu-item
          label="确认离开"
          @click="handleMenuConfirmLeave(row)"
          v-hasPermi="['elder:visit:confirmLeave']"
        />
      </template>
    </Table>
  </ContentWrap>
  <ElderVisitEdit ref="editFormRef" @success="getPage" />
  <ElderVisitTime ref="timeFormRef" @success="getPage" />
</template>
<script setup name="ElderVisit" lang="ts">
import * as ElderVisitApi from '@/api/elder/visit'
import ElderVisitEdit from './ElderVisitEdit.vue'
import ElderVisitTime from './ElderVisitTime.vue'
import { ElderVisitStatusEnum } from '@/utils/constants'
import { DICT_TYPE, getDictObj, getIntDictOptions, getBoolDictOptions } from '@/utils/dict'
const message = useMessage() // 消息弹窗
const timeFormRef = ref()
const editFormRef = ref()
const queryFormRef = ref()
const queryParams = ref({
  visitName: undefined,
  visitMobile: undefined,
  isReserve: undefined,
  status: undefined
})
const queryData = ref()
const columns = [
  {
    label: '老人姓名',
    prop: 'elder.name'
  },
  {
    label: '来访者姓名',
    prop: 'visitName'
  },
  {
    label: '来访者手机',
    prop: 'visitMobile'
  },
  {
    label: '与老人关系',
    prop: 'kinship'
  },
  {
    label: '来访时间',
    prop: 'visitTime'
  },
  {
    label: '同行人数',
    prop: 'visitCount'
  },
  {
    label: '来访缘由',
    prop: 'visitReason'
  },
  {
    label: '备注',
    prop: 'remark'
  },
  {
    label: '状态',
    prop: 'status',
    formatter: ({ status }) => getDictObj(DICT_TYPE.ELDER_VISIT_STATUS, status).label
  },
  {
    label: '离开时间',
    prop: 'leaveTime'
  },
  {
    label: '预约时间',
    prop: 'reserveTime'
  },
  {
    label: '是否预约',
    prop: 'isReserve',
    formatter: ({ isReserve }) => getDictObj(DICT_TYPE.INFRA_BOOLEAN_STRING, isReserve).label
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]
/** 初始化 */
onMounted(() => {
  getPage()
})

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 新增按钮操作 */
const handleClickCreate = () => {
  editFormRef.value.open('create', 0)
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await ElderVisitApi.pageQuery(queryParams.value)
}

/** 处理右击事件 修改 */
const handleMenuUpdate = (row) => {
  editFormRef.value.open('update', row.id)
}

/** 处理tables双击修改事件 */
const handleTableDblclick = (row) => {
  editFormRef.value.open('update', row.id)
}

/** 处理右击事件 取消预约 */
const handleMenuCancel = async (row) => {
  if (row.status != ElderVisitStatusEnum.RESERVED) {
    message.error('只有已预约状态的来访登记可以取消')
    return
  }
  await message.confirm('确定要取消预约吗？')
  await ElderVisitApi.updateStatus({ id: row.id, status: ElderVisitStatusEnum.CANCEL })
  getPage()
}

/** 处理右击事件 确认来访 */
const handleMenuConfirmVisit = (row) => {
  if (row.status != ElderVisitStatusEnum.RESERVED) {
    message.error('只有已预约状态的来访登记可以确认来访')
    return
  }
  timeFormRef.value.open(row.id, ElderVisitStatusEnum.VISITED, row.visitTime)
  getPage()
}

/** 处理右击事件 确认离开 */
const handleMenuConfirmLeave = (row) => {
  if (row.status != ElderVisitStatusEnum.VISITED) {
    message.error('只有已来访状态的来访登记可以确认离开')
    return
  }
  timeFormRef.value.open(row.id, ElderVisitStatusEnum.LEAVE)
  getPage()
}
</script>
